<template>
	<view style="padding-bottom: 140rpx;background: #f5f5f5;">
		<view class="hm_boxImg" v-for="item in 5" :key="item">
			<image src="https://goods.ruanmengkeji.cn/api/fileUp/4ce88c2c-7ec7-4c9f-aae5-cd2f97056bde.png" mode="">
			</image>
			<p>曲靖辣子鸡套餐</p>
			<p>￥108.00</p>
			<view class="hm_ceBox">
				选规格
			</view>
		</view>
		<view class="hm_foot">
			<view class="hm_shop">
				<image src="../../static/img/shop.png" mode=""></image>
			</view>
			<p>￥432.00</p>
			<view class="hm_goShop">
				下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang='scss'>
	.hm_boxImg {
		width: 710rpx;
		height: 348rpx;
		margin: 20rpx auto;
		position: relative;

		image {
			width: 710rpx;
			height: 348rpx;
			border-radius: 13rpx;
		}

		p:nth-child(2) {
			position: absolute;
			bottom: 65rpx;
			left: 20rpx;
			font-size: 28rpx;
			color: white;
		}

		p:nth-child(3) {
			position: absolute;
			bottom: 25rpx;
			left: 20rpx;
			font-size: 28rpx;
			color: white;
		}

		.hm_ceBox {
			width: 120rpx;
			height: 50rpx;
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			background: #5CAF5D;
			font-size: 24rpx;
			color: white;
			text-align: center;
			line-height: 50rpx;
			position: absolute;
			right: 20rpx;
			bottom: 25rpx;
		}
	}

	.hm_foot {
		height: 116rpx;
		width: 750rpx;
		background: white;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;

		.hm_shop {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
			background: #5caf5d;
			text-align: center;
			line-height: 144rpx;
			position: absolute;
			top: -12rpx;
			left: 28rpx;

			image {
				width: 62rpx;
				height: 62rpx;
			}
		}

		p {
			font-size: 32rpx;
			color: red;
			position: absolute;
			left: 160rpx;
			top: 44rpx;
		}

		.hm_goShop {
			width: 208rpx;
			height: 64rpx;
			background: #5CAF5D;
			border-radius: 40rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 64rpx;
			color: white;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}
</style>